<template>
  <div class="treeNode">
    <div
      class="label"
      @click="toggleChilds"
      v-if="node.hasOwnProperty('label') && node.label != ''"
    >
      {{ node.label }}
      <span v-if="node.hasOwnProperty('childs') && node.childs.length != 0">
        ({{ node.childs.length }})
      </span>
    </div>
    <div
      class="childs"
      :class="isHidden ? 'childsHidden' : ''"
      v-if="node.hasOwnProperty('childs') && node.childs.length != 0"
    >
      {{ childs }}
      <div class="child" v-for="(item, index) in node.childs" :key="index">
        <tree-node :node="item" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from "vue";

interface Node {
  label: string;
  child: Node[];
}

export default defineComponent({
  name: "tree-node",
  props: {
    node: {
      type: Object as PropType<Node>,
    },
  },
  setup() {
    const isHidden = ref(false);
    function toggleChilds() {
      isHidden.value = !isHidden.value;
    }
    return { toggleChilds, isHidden };
  },
});
</script>
<style lang="scss" scoped>
.treeNode {
  .label {
    cursor: pointer;
  }
  .childs {
    transform: translateX(40px);
    max-height: 100vh;
    transition: 0.7s;
    overflow: hidden;
  }
  .childsHidden {
    max-height: 0px;
  }
}
</style>
